<template>
	<view class="article">
		<view class="container">
			<view class="title">{{ info.title }}</view>
			<view class="bbox" v-if="info.originalPic">
				<image :src="info.originalPic" mode="aspectFit" @click="showImage()"></image>
				<!-- 	<u--image
				    :showLoading="true"
				    :src="info.originalPic"
				    width="80px"
				    height="80px"
				  ></u--image> -->
			</view>
			<view class="content-text">
				<u-parse :content="info.content"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
import API from '@/common/api';
export default {
	name: 'article',
	data() {
		return {
			id: '',
			info: {},
			recommend_proudcts: []
		};
	},
	onLoad(data) {
		this.title = data.title;
		uni.setNavigationBarTitle({
			title: data.title
		});
		this.id = data.id;
		this.init();
	},
	methods: {
		showImage() {
			this.look(this.info.originalPic, [this.info.originalPic]);
		},
		init() {
			this.$http
				.getJson('index_newsDetail', {
					id: this.id
				})
				.then((res) => {
					const { code, data } = res;
					this.info = res.data.info;
					this.recommend_proudcts = data.recommend_proudcts;
					if (!this.title) {
						uni.setNavigationBarTitle({
							title: res.data.info.channel_title ? res.data.info.channel_title : res.data.info.title
						});
					}
				});
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background-color: #fff;
}
.article {
	padding: 32rpx;
	background-color: #fff;
	.container {
		// padding: 44rpx 24rpx;
		// .bor();
		.bbox {
			margin-bottom: 20rpx;
			image {
				// width: 408rpx;
				// width: 100%;
				height: 238rpx;
				// height: auto;
				margin: auto;
			}
		}
		.title {
			padding: 40rpx 0 40rpx;
			padding: 20rpx 0 40rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #000000;
			text-align: center;
		}
		.content-text {
		}
	}
}
</style>
